<template>
  <div class="image-container">
    <img :src="blurImg" alt="模糊图片" class="blur-image" />
    <img :src="resutImg" alt="高清图片" class="high-res-image" />
  </div>
</template>

<script setup lang="ts">
  import { onMounted, watch, ref } from 'vue'

  const blurImg = 'https://img2.baidu.com/it/u=1475322256,1576404479&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
  let resutImg: any = ref<string>('')

  watch(
    () => resutImg.value,
    () => {
      const blurImage: HTMLElement | null = document.querySelector('.blur-image')
      const highResImage: HTMLElement | null = document.querySelector('.high-res-image')

      if (blurImage && highResImage) {
        highResImage.addEventListener('load', () => {
          console.log('加载完毕？？')
          blurImage.style.display = 'none'
          highResImage.style.display = 'block'
        })
      }
    }
  )

  onMounted(() => {
    setTimeout(() => {
      resutImg.value = 'https://img0.baidu.com/it/u=1485883379,3534879296&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
    }, 2000)
  })
</script>

<style lang="less" scoped>
  .image-container {
    position: relative;
    width: 500px;
    height: 500px;
  }
  .blur-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(5px);

    z-index: 1;
  }
  .high-res-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: none;
    // transition: all 0.7s;
  }
</style>
